<template>
  <div id="wantBuy" class="c2cBackground fixed left-0 right-0 top-0 bottom-0 wantBuy">
    <div
        class="w-full h-122 pl-40 pr-31 box-border c2cBackground flex  text-white items-center"
    >
      <van-icon  name="arrow-left" @click="goback"/>
      <div class="flex-1 text-right mr-100" @click="showPopup">
        <span class="font-35 mr-8">{{ $t('自选区') }}</span>
        <van-icon name="arrow-down" />
      </div>
      <van-popup round position="top" class="pt-30" v-model="show" :closeable="true">
        <div class="flex justify-around c2cColor mt-40 pb-48">
          <div class="flex flex-col items-center" @click="$router.push({ path: '/wantBuy/quick' })">
            <img class="w-56 h-56" src="@/assets/image/otc/wantBuyHead/fast.png" alt="" />
            <span class="font-24 mt-10 h-32 font-500" >{{ $t('快捷区') }}</span>
          </div>
          <div class="flex flex-col items-center" @click="show=false">
            <img class="w-56 h-56" src="@/assets/image/otc/wantBuyHead/optional.png" alt="" />
            <span class="font-24 mt-10 font-500">{{ $t('自选区') }}</span>
          </div>
        </div>
      </van-popup>
      <div class="w-232 h-64 px-23 box-border box-radius text-black flex justify-around items-center"
        style="background: #c2e1ff">
        <div class="flex items-center" @click="$router.push({ path: '/selectLegalCurrency' })">
          <span class="mr-15 font-31 font-400">{{ exchangeCurrency }}</span>
          <img class="w-24 h-20" :src="require('@/assets/image/otc/wantBuyHead/Group.png')" alt="" />
        </div>
        <template >
          <span class="mx-28 w-2 h-36">|</span>
          <van-popover get-container="#quick" v-model="showPopover" :actions="actions" @select="onSelect" placement="bottom-end"
            theme="dark" :offset="[20, 20]">
            <template #reference>
              <img @click="showPopover = !showPopover" class="relative bottom-4 w-24 h-6 list-img"
                :src="require('@/assets/image/otc/wantBuyHead/Group2.png')" alt="" />
            </template>
          </van-popover>
        </template>
      </div>
    </div>
    <buy :loading="loading" :symbol="symbolList" @change="onChange" @change-direction="handleDirection"
      @confirm="selectConfirm">
      <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
        v-model="isLoading" @refresh="onRefresh">
        <template v-if="list.length > 0">
          <van-list v-model="loading" :immediate-check="false" :finished="finished" :finished-text="$t('没有更多了')"
            @load="onLoad">
            <div class="flex flex-col ml-32  mr-32" v-for="(item, index) in list" :key="'buy' + index">
              <div class="flex">
                <div class="flex-1 textColor">
                  <div class="flex items-center">
                    <img class="w-32 h-32 mr-10" @click="handleGoUserHome(item)" :src="replaceImgUrl(item.head_img)" alt="">
                    <div class="font-400 font-26 mr-10">{{ item.nick_name }}</div>
                    <img class="w-22 h-22" :src="require('@/assets/image/otc/buy/star.png')" alt="">
                  </div>
                  <div class="font-22 text-grey mt-31">{{ $t('单价') }}</div>
                  <div class="mt-10">
                    <span class="font-22 mr-10">{{ item.currency }}</span>
                    <span class="font-40">{{ (item.symbol_value / 1).toFixed(2) }}</span>
                  </div>
                  <div class="mt-26">
                    <span class="font-22 text-grey mr-10">{{ $t('数量') }}</span>
                    <span>{{ item.coin_amount && (item.coin_amount / 1).toFixed(item.symbol.toUpperCase() === 'USDT' ? 2 : 4) }}</span>
                  </div>
                  <div class="mt-13">
                    <span class="font-22 text-grey mr-10">{{ $t('限额') }}</span>
                    <span class="font-22 ">{{ currencySymbol }} {{ (item.investment_min / 1).toFixed(2) }} - {{ currencySymbol }} {{ (item.investment_max / 1).toFixed(2) }}</span>
                  </div>
                  <div class="flex mt-36">
                    <section v-for="(_item, _index) in (item.pay_type_name.split(','))" :key="_index" class="flex">
                      <div class="w-5 h-20 col  mr-9">|</div>
                      <div class="mr-19">{{ _item }}</div>
                    </section>
                    <!-- <div class="w-5 h-20 cl mr-9">|</div>
                    <div>币交易</div> -->
                  </div>
                </div>
                <div class="flex flex-col justify-between items-end">
                  <div class="text-grey flex font-24 ">
                    <div class="flex items-center">
                      <span>{{ $t('成交量') }} {{ item.thirty_days_order }}</span>
                      <span class="w-1 h-16 mx-8" style="background: #EAEBEE"></span>
                      <span>{{ item.thirty_days_order_ratio }}%</span>
                    </div>
                  </div>
                  <div class="w-250 h-54 font-24 greyBg lh-54 text-center textColor px-10" 
                    v-if="item.direction === 'sell'&&!methodAvaiable(item.pay_type_name, payMethods)">{{ $t('不满足广告方要求') }}</div>
                  <div v-if="item.direction === 'sell'" @click="trade('sell', item)"
                    class="w-160 h-58 font-29 text-white rounded-lg bg-red text-center lh-58">{{ $t('出售') }}
                  </div>
                  <div v-if="item.direction === 'buy'" @click="trade('buy', item)"
                    class="w-160 h-58 font-29 text-white rounded-lg bg-green text-center lh-58">{{ $t('购买') }}
                  </div>
                </div>
              </div>
              <div class="flex justify-center mb-12">
                <div class="w-full h-8 diviLine mt-40 mb-45 box-border"></div>
              </div>
            </div>
          </van-list>
        </template>
        <template v-if="list.length === 0 && loading === false && isLoading === false">
          <div>
            <van-empty class="custom-image" :image="require('@/assets/image/otc/nodatas.png')"
              :description="$t('暂无广告')">
            </van-empty>
          </div>

        </template>
      </van-pull-refresh>
    </buy>
    <van-dialog v-model="showJie" :showConfirmButton="false">
      <div class="dia-main">
        <p class="dia-change">{{$t('切换到接单模式')}}</p>
        <p class="dia-text">{{$t('接单模式适用于有发布广告交易需求的用户。')}}</p>
        <div class="dia-btn">
          <div @click="showJie = false">{{$t('取消')}}</div>
          <div style="background: #1d91ff; color: #ffffff" @click="linkToC2C">
            {{$t('确认')}}
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  SET_ORDER_MODE
} from "@/store/const.store";
import { Icon, Popup, Popover, Dialog, List, PullRefresh, Empty } from 'vant'
import listLoadMixins from '@/utils/list-load-mixins'
import Buy from '@/page/placeAnOrder/components/buy/buy'
import otcApi from "@/API/otc";
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { Toast, Notify } from 'vant'
// import payment from "@/store/modules/payment";
import {replaceImgUrl} from "@/utils/utis";
export default {
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     // 回到原来的位置

  //     // const position = JSON.parse(window.sessionStorage.getItem('position'))
  //     // document.querySelector('.roll-section').scrollTop = position
  //     setTimeout(() => {
  //       // console.log( document.querySelector('.roll-section') )
  //     })
  //   })
  // },
  beforeRouteLeave(to, from, next) {
    // 保存离开页面时的列表的位置
    const position = document.querySelector('.roll-section').scrollTop
    window.sessionStorage.setItem('position', JSON.stringify(position))
    next()
  },
  props: {
    showDot: {
      type: Boolean,
      default: true
    }
  },
  name: 'wantBuy',
  mixins: [listLoadMixins],
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Popover.name]: Popover,
    [Dialog.name]: Dialog,
    [List.name]: List,
    [Empty.name]: Empty,
    [PullRefresh.name]: PullRefresh,
    Buy,
  },
  computed: {
    ...mapGetters('c2c', ['symbolList', 'exchangeCurrency', 'symbol','currencySymbol']),
    ...mapGetters('home', ['currency'])
  },
  async created() {
    console.log('created')
    await this.SET_SYMBOL_LIST()
    await this.SET_PAY_METHODS({ language: this.$i18n.locale })
    if (!this.exchangeCurrency) {
      console.log(this.currency.currency);
      this.SET_CURRENCY(this.currency.currency)
    }

    if (!this.currencySymbol) {
      this.SET_CURRENCY_SYMBOL(this.currency.currency_symbol)
    }

    otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then(res => {
      res.data.map(item => {
        this.payMethods.push(item.methodName)
      })
    })
    this.params = {
      page_no: this.page_no, // 页码
      direction: this.$store.state.c2c.direction, // 买 or 卖
      currency: this.exchangeCurrency, // 法币
      symbol: this.symbol, // 配置的加密货币
      amount: '', // 兑换金额
      method_type: '', // 支付方式
      language: this.$i18n.locale 
    }
    this.get()
  },
  data() {
    return {
      showJie: false,
      show: false,
      showPopover: false,
      page_no: 1,
      list: [],
      direction: 'buy', //
      params: {},
      loading: false,
      payMethods: [],
      actions: [
        {
          text: this.$t('收款方式'),
          icon: require('@/assets/image/otc/buy/collection_icon.png'),
          path: '/paymentMethod',
        },
        // {
        //   text: this.$t('c2c帮助中心'),
        //   icon: require('@/assets/image/otc/buy/help_icon.png'),
        //   path: '/c2cHelpCenter',
        // },
        // {
        //   text: 'c2c用户中心',
        //   icon: require('@/assets/image/otc/buy/user_icon.png'),
        //   path: '/c2c_normal_user',
        // },
        // {
        //   text: this.$t('接单模式'),
        //   icon: require('@/assets/image/otc/buy/order_icon.png'),
        // },
      ],
      replaceImgUrl
    }
  },
  methods: {
    ...mapActions('c2c', ['SET_SYMBOL_LIST', 'SET_PAY_METHODS']),
    ...mapMutations('c2c', ['SET_CURRENCY','SET_CURRENCY_SYMBOL']),
    onChange(params) { // 买卖变化
      this.params = Object.assign(this.params, params)
      this.list = []
      this.get()
    },
    methodAvaiable(payStr, arr) {
      console.log(payStr, arr)
      let exist = false
      for (let i = 0; i < arr.length; i++) {
        if (payStr.indexOf(arr[i]) > -1) {
          exist = true
          break
        }
      }
      return exist
    },
    get() {
      Toast.loading()
      otcApi.ctcAdvertList(this.params).then(res => {
        Toast.clear()
        this.handleData(res.data)
      })
    },
    linkToC2C() {
      // if (this.$store.state.user.userInfo.c2c_user_type === 0) { // 普通用户
      //   Toast('你不是平台认证商家')
      //   return
      // }
      this.$router.push('/c2c/receivingBuy')
      this.$store.commit(`c2c/${SET_ORDER_MODE}`, {
        state: true,
      })
    },
    showPopup() {
      this.show = true
    },
    onSelect(action) {
      if (action.text === '接单模式') {
        this.showJie = true
        return
      }
      this.$router.push({
        path: action.path,
      })
    },
    handleDirection(direction) {
      console.log(direction);
      this.direction = direction;
      this.params.direction = this.direction;
      // 发送请求
      this.get()
    },
    handleGoUserHome(item) {
      console.log('去买卖用户首页', item)
      this.$router.push({
        path: '/advertiserDetail',
        query: {
          uid: item.c2c_user_id
        }
      })
    },
    trade(type, data) {
      // 支付方式是否满足
      if (type=='sell'&&!this.methodAvaiable(data.pay_type_name, this.payMethods)) {
        console.log(data.pay_type_name)
        console.log(this.payMethods)
          this.$toast(this.$t('请添加相应的收款方式'))
          setTimeout(() => {
            this.$router.push('/paymentMethod')
          }, 500);
         //Notify({ type: 'danger', message: '不满足广告方要求' })
        return
      }
      //
      if (data && data.isRemoved) {
        this.showRemoved = true;
        return;
      }
      this.$store.commit('c2c/SET_ADV_ID', data.id) // 保存广告id
      this.$router.push({
        name: 'c2cTrade'
        // query: {
        //   type,
        //   id: data.id
        // }
      })
    },
    selectConfirm(params) {
      this.params = Object.assign(this.params,params)
      this.list = []
      this.get();
    },
    goback(){
      let frompath = this.$route.query.frompath
      if (frompath){
        this.$router.push(frompath)
      }else{
        this.$router.push('/home')
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.wantBuy {
  width: 100%;
  box-sizing: border-box;
}

.dia-main {
  padding: 50px;
  color: #000;

  .dia-change {
    text-align: center;
    margin-bottom: 32px;
    font-size: 35px;
    font-weight: bold;
  }

  .dia-text {
    margin-bottom: 40px;
  }

  .dia-btn {
    display: flex;
    justify-content: space-between;

    div {
      width: 240px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      background: #eaebee;
      color: #21262f;
      font-size: 32px;
      border-radius: 8px;
    }
  }
}

.box-radius {
  border-radius: 40px;
}

.list-img {
  top: -6px;
}
</style>
